<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link
      rel="stylesheet"
      href="./bootstrap-5.1.3-dist/css/bootstrap.min.css"
    />
    <script src="./bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- Content here -->
      <!-- 上面面板 -->
      <div class="panel panel-primary ">
        <!-- 面板头部 -->
        <div class="panel-heading bg-primary text-white">
          <h5 class="panel-title">添加图书</h5>
        </div>
        <!-- 面板内部 -->
        <div class="panel-body d-flex justify-content-center border border-secondary ">
            <!-- 第一个表单 -->
            <div class="input-group flex-nowrap">
                <span class="input-group-text" id="addon-wrapping">书名</span>
                <input type="text" class="form-control" placeholder="书名" aria-label="Username" aria-describedby="addon-wrapping" id="ipt_bookname">
              </div>
              <!-- 第二个表单 -->
              <div class="input-group flex-nowrap">
                <span class="input-group-text" id="addon-wrapping">作者</span>
                <input type="text" class="form-control" placeholder="作者" aria-label="Username" aria-describedby="addon-wrapping"
                id="ipt_author">
              </div>
              <!-- 第三个 -->
              <div class="input-group flex-nowrap">
                <span class="input-group-text" id="addon-wrapping">出版社</span>
                <input type="text" class="form-control" placeholder="出版社" aria-label="Username" aria-describedby="addon-wrapping"
                id="ipt_publisher">
              </div>
              <!-- 按钮 -->
           <button class="myBtn">add</button>
          </div>
        </div>
        <!-- 表格 -->
        <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">书名</th>
                <th scope="col">作者</th>
                <th scope="col">出版社</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>@mdo</td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
    <script>
   
    </script>
  </body>
</html>
